<template>
	
	<view class="custom_nav" :class="flag ? 'current' : '' " :style="`height: ${puplicNavHeight}px; padding-top: ${navTop}px`">
		<view class="custom_nav_text" :style="`height: ${customNavHeight}px`">
			<view class="wp100" v-if="$slots.header">
				<slot name="header"></slot>
			</view>
			<view class="nav_title" v-else>{{ titleTxt }}</view>
			<view class="" v-if="isBack">
				<image :src="flag ? '/static/images/icon_back_2.png' : '/static/images/icon_back_1.png'" class="back_btn"></image>
			</view>
		</view>
	</view>
	
</template>

<script setup>
	
	import { ref, reactive, defineProps, defineEmits } from 'vue';
	import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
	
	const props = defineProps({
		titleTxt: {
			type: String,
			default: ''
		},
		flag: {
			type: Boolean,
			default: false
		},
		isBack: {
			type: Boolean,
			default: true
		}
	});
	
	const emit = defineEmits(['update:puplicNavHeight'])
	
	const puplicNavHeight = ref(0); //记录导航栏总区域的高度
	const navTop = ref(0); //胶囊距离顶部的距离
	const customNavHeight = ref(0); //胶囊的高度
	
	onReady(() => {
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		puplicNavHeight.value = parseInt(menuButtonInfo.top + menuButtonInfo.height  - 0 + 10);
		navTop.value = parseInt(menuButtonInfo.top - 10);
		customNavHeight.value = parseInt(menuButtonInfo.height - 0 + 20);
		emit('update:puplicNavHeight', puplicNavHeight.value);
	})
	
</script>

<style lang="scss" scoped>
	
	.custom_nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		&.current { background: #fff; }
		.custom_nav_text {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			.nav_title {
				position: relative;
				font-size: 32rpx;
				color: #fff;
			}
			.back_btn {
				position: absolute;
				top: 50%;
				left: 34rpx;
				width: 50rpx;
				height: 50rpx;
				z-index: 2;
				transform: translateY(-50%);
			}
		}
		&.current .nav_title { color: #333; }
	}
	
</style>